<template>
  <div class="login-wrap">
	  <div class="login-content-box">
		  <div class="content-info">
			  <div class="heard-box">
				  <img src="~@/assets/img/logo1.png" alt="">
				  <h2>滨湖世纪社区文明养犬智慧服务平台</h2>
			  </div>
			  <el-form ref="form" :model="param" :rules="rules" @submit.native.prevent>
				  <el-form-item prop="username">
					  <img src="~@/assets/img/zh@2x.png" alt="">
					  <el-input class="ipt" v-model="param.username" placeholder="请输入账号" @keyup.enter.native="submitFn">
					  </el-input>
				  </el-form-item>
				  <el-form-item prop="password">
					  <img src="~@/assets/img/ss@2x.png" alt="">
					  <el-input class="ipt" type="password" v-model="param.password" placeholder="请输入密码" @keyup.enter.native="submitFn">
					  </el-input>
				  </el-form-item>
				  <el-form-item>
					  <el-button type="primary" size="medium" class="submit-btn" @click="submitFn">登录</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
	  </div>
	  <div class="footer">
		  <span>Copyright 2024 by  滨湖世纪社区文明养犬智慧服务平台</span>
		  <p>技术支持:合肥忻尔软件服务有限公司  www.hefeixiner.com</p>
	  </div>
  </div>
</template>

<script>
import request from '../../api/index';

export default {
  data: function () {
    return {
      loading: false,
      param: {
        username: '',
        password: '',
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      },
    };
  },
  mounted() {
  },
  methods: {
	  submitFn() {
		  if(this.loading) return;
		  this.$refs.form.validate(async valid => {
			  if(!valid) return;
			  try {
				  this.loading = true
				  const loginToken = await request.loginData(this.param)
				  if(loginToken.code === 0) {
					  localStorage.setItem('token', loginToken.data.token);
					  localStorage.setItem('ms_username', this.param.username);
					  await request.getRouter().then(res => {
						  localStorage.setItem('routers', JSON.stringify(res.data));
					  });
					  await request.userInfo().then(res => {
						  if (res.code === 0) {
							  this.userInfo = res.data.sysUserDetailVo
							  localStorage.setItem('userInfo', JSON.stringify(res.data.sysUserDetailVo));
							  localStorage.setItem('permissionsList', res.data.permissions);
						  }
					  });

					  this.$message.success('登录成功');
					  location.href = window.location.href.split('#')[0];
				  } else {
					  this.$message.error(res.msg || '账号或密码错误');
				  }
			  } finally {
				  this.loading = false
			  }
		  });
	  }
  },
};
</script>

<style lang="scss" scoped>
.login-wrap {
	width: 100vw;
	height: 100vh;
	position: relative;
	background: #4f78fe url("~@/assets/img/bg@2x.png") center no-repeat;
	background-size: 100% 100%;
	.login-content-box {
		width: 1200px;
		height: 690px;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #4f78fe url("~@/assets/img/xkk@2x.png") center no-repeat;
		background-size: 100% 100%;
		.content-info {
			width: 45%;
			margin-left: 50%;
			padding: 170px 0 108px;
			text-align: center;
			.heard-box {
				margin-bottom: 20px;
				text-align: center;
				display: flex;
				img {
					margin-top: -5px;
					height: 50px;
					margin-right: 8px;
				}
				h2 {
					font-size: 26px;
				}
			}
			::v-deep .el-form-item__content {
				position: relative;
				img {
					width: 30px;
					height: 30px;
					position: absolute;
					top: calc(50% - 2px);
					left: 20px;
					transform: translateX(-50%);
					z-index: 99;
				}
				.ipt {
					margin-top: 20px;
					& > .el-input__inner {
						padding-left: 38px;
						background-color: #F7F9FF;
						&::placeholder {
							font-weight: 500;
							font-size: 18px;
							color: #CFCFCF;
							line-height: 23px;
						}
					}
					&,
					& > .el-input__inner {
						height: 52px;
						line-height: 52px;
					}
				}
			}
			.submit-btn {
				width: 100%;
				height: 52px;
				margin-top: 40px;
				padding: 0;
				letter-spacing: 20px;
				font-weight: bold;
				font-size: 22px;
				background-color: #4F78FE;
				border-right: 4px;

			}
		}
	}
	.footer {
		width: 100%;
		position: absolute;
		bottom: 20px;
		text-align: center;
		color: white;
		font-weight: 500;

		line-height: 23px;
		span{
			font-size: 20px;
		}
		p{
			font-size: 16px;
		}
	}

	* {
		box-sizing: border-box;
	}
}
</style>
